<template>
  <div id="DataMaintenance-messageType">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{$t('classAffairsSet.classAffSettings.parentJob.50zfkp009hw0')}}</span>
      </div>
      <div class="cr-head-right">
        <el-button type="primary" size="mini">{{$t('classAffairsSet.classAffSettings.parentJob.50zfkp00b6c0')}}</el-button>
      </div>
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="flex-al Inquire-box mb12">
        <div class="ipt-box" style="width:250px;">
          <el-input v-model="input" clearable :placeholder="$t('classAffairsSet.classAffSettings.parentJob.50zfkp00bms0')"></el-input>
        </div>
        <el-button type="primary" size="mini" class="search-btn fs14">{{$t('classAffairsSet.classAffSettings.parentJob.50zfkp00c0k0')}}</el-button>
      </div>
      <div class="tableDiv" ref="auto_height_table">
        <normalTableCont
          :tableData="tableList"
          @handleSelectionChange="handleSelectionChange"
          @handSetting="handSetting"
        >
          <!-- 按钮操作组********start -->
          <el-table-column ref="fixedColumn" :label="$t('classAffairsSet.classAffSettings.parentJob.50zfkp00ch00')" align="center" width="120px" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click.native.prevent="handSee(scope.row)">{{$t('classAffairsSet.classAffSettings.parentJob.50zfkp00cvo0')}}</el-button>
              <el-button type="text" size="small" @click.native.prevent="handSee(scope.row)">{{$t('classAffairsSet.classAffSettings.parentJob.50zfkp00d8g0')}}</el-button>
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </normalTableCont>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px;"
          :current-page.sync="paging.curPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.pageTotal"
          @current-change="curPageChange"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import normalTableCont from "@/components/tables/normalTableCont.vue";
export default {
  data() {
    let item = {
      a1: "222222222222222",
      a2: "222222222222222",
      a3: "222222222222222",
      a4: "222222222222222",
      a5: "222222222222222",
      a6: "222222222222222"
    };
    return {
      input: "",

      // 表格数据
      tableList: {
        // 表格的列
        columns: [
          {
            fieldstring: "a1",
            fieldname: "111111",
            show: "1",
            sortable: true
          },
          {
            fieldstring: "a2",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a3",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a4",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a5",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a6",
            fieldname: "111111",
            show: "1"
          }
        ],
        // 表格数据
        list: Array(10).fill(item),
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: true, //是否显示多选
          issetting: true, //是否可以编辑列
          tableHeight: 0
        }
      },
      // 分页
      paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 10
      }
    };
  },
  components: {
    normalTableCont
  },
  methods: {
    // 复选框
    handleSelectionChange(v) {
      console.log(v);
    },
    // 编辑列编辑提交
    handSetting(v) {
      console.log(v);
    },
    // 页码变化
    curPageChange(v) {
      this.paging.curPage = v;
    },
    // pageSize改变
    pageSizeChange() {
      this.paging.curPage = 1;
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 52
        );
      }
    });
  }
};
</script>